<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout"
      th:with="activeNav='templatebanner'">
<head>
    <meta charset="UTF-8">
    <title>banner模板</title>
</head>
<body>
<div layout:fragment="content">
    <section class="content-header">
        <h1>
            Banner模板管理
        </h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light bordered" style="width:auto;">
                    <div class="portlet-body">
                        <div class="table-toolbar">
                            <form class="form-horizontal" method="post" id="filter_form">
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">模板名称</label>
                                    <div class="col-sm-3">
                                        <input type="text" onkeyup="value=value.replace(/[ ]/g,'')" class="form-control"
                                               name="name" placeholder="请输入模板名称"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3"></label>
                                    <div class="col-md-1" style="float: right;margin-top: 0px;width: auto">
                                        <div class="btn-group btn-group-devided" data-toggle="buttons"
                                             style="width: auto; height: 40px;float: right;">
                                            <a href="jacascript::void(0)" type="button" class="btn default"
                                               style="float: right;margin-right: 1px"
                                               onclick="$('#filter_form').get(0).reset()">重置
                                                <i class="fa fa-gavel"></i>
                                            </a>
                                            <a href="javascript:void(0);" class="btn btn-success"
                                               onclick="showBannerTemplate()">新增模板<i class="fa fa-plus"></i>
                                            </a>
                                            <button type="button" style="float: right;margin-right: 1px"
                                                    class="btn btn-primary" id="search-button">查询<i
                                                    class="fa fa-repeat"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="sample_1_wrapper" class="dataTables_wrapper no-footer" style="margin-top: -50px;">
                            <table class="table table-striped table-bordered table-hover" id="initTables">
                                <thead>
                                <tr>
                                    <!--设置第一列为序号列(datatable自动生成)-->
                                    <th style="min-width: 20px;">序号</th>
                                    <th style="min-width: 70px">模板名称</th>
                                    <th style="min-width: 70px">备注</th>
                                    <th style="min-width: 70px">集团/商场</th>
                                    <th style="min-width: 70px">添加时间</th>
                                    <th style="min-width: 70px">操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="starModal" class="modal fade" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span></button>
                                <h4 class="modal-title">新增模板</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="portlet-body form">
                                        <form class="form-horizontal" role="form" id="bannertemplateformid"
                                              enctype="multipart/form-data"
                                              method="post">
                                            <div class="form-body">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">模板名称:</label>
                                                    <div class="col-sm-7">
                                                        <input type="text" class="form-control"
                                                               placeholder="请填写模板名称"
                                                               data-rule="required(请填写模板名称)|focus"
                                                               name="name" id="omsCode">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">上传附件:</label>
                                                    <div class="col-sm-7">
                                                    <span class="btn btn-info fileinput-button">
                                                        <span>选择文件</span>
                                                        <i class="fa fa-plus"></i>
                                                        <input type="file" name="file" id="file"
                                                               accept=".rar,.RAR,.zip,.ZIP"
                                                               data-rule="required(请选择文件)|focus">
                                                    </span>
                                                        <button type="button" id="uploadId" class="btn btn-info"
                                                                onclick="upload()">上传
                                                        </button>
                                                        <input type="text" id="urlId" name="url" hidden/>
                                                        <input type="text" id="fileUploadUrl" name="fileUploadUrl"
                                                               hidden
                                                               th:value="${fileUploadUrl}"/>
                                                        <input type="text" id="token" name="token" hidden
                                                               th:value="${token}"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                        <span>文件格式：rar、zip</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label"></label>
                                                    <div class="col-sm-7">
                                                        <span id="aim"></span><span id="tipid" hidden
                                                                                    style="color: red">请上传文件</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">备注:</label>
                                                    <div class="col-sm-7">
                                                    <textarea type="text" class="form-control" name="remark"
                                                              id="remarkid"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer" style="text-align: center">
                                                <button type="submit" class="btn btn-success" id="save">保存</button>
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="application/javascript">
            var table;
            $(function () {
                var columns = [
                        // 占位列，用于生成序号
                        {data: null},
                        {data: "name"},
                        {data: "remark"},
                        {
                            render: function (data, type, row) {
                                return null == row.mallName ? "集团" : row.mallName;
                            }
                        },
                        {
                            data: "createTime", render: function (data) {
                                if (data == null) {
                                    return " ";
                                } else {
                                    return (new Date(data)).Format("yyyy/MM/dd hh:mm");
                                }
                            }
                        },
                        {
                            title: "操作",
                            render: function (data, type, row) {
                                return '<a href=' + row.url + ' type="button" class="btn btn-circle red-mint">下载</a>';
                            }
                        }
                    ]
                ;
                table = initTables("/work/listBannerTeamplate.json", columns, null);
                // 生成分页连续的序号
                table.on('draw.dt', function () {
                    table.column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function (cell, i) {
                        i = i + 1;
                        var page = table.page.info();
                        var pageno = page.page;
                        var length = page.length;
                        var columnIndex = (i + pageno * length);
                        cell.innerHTML = columnIndex;
                    });
                });
            });

            new SMValidator('#bannertemplateformid', {
                submit: function (valid, form) {
                    // 文件是否上传
                    if ('' != $("#aim").text() && '' == $("#urlId").val()) {
                        valid = false;
                        $("#tipid").css("display", "block");
                    }
                    if (valid) {
                        // 设置保存按钮不可用
                        $("#save").attr("disabled", "disabled");
                        $.ajax({
                            url: "/work/addBannerTemplate.json",
                            type: "POST",
                            dataType: "json",
                            data: $("#bannertemplateformid").serialize(),
                            success: function (data, status) {
                                if (status == 'success') {
                                    var msg = "保存成功";
                                    Lobibox.notify('success', {
                                        msg: msg,
                                        sound: false,
                                        delay: 1500
                                    });
                                    $("#starModal").modal("hide");
                                    table.ajax.reload();
                                } else {
                                    Lobibox.notify('error', {
                                        msg: "保存失败",
                                        sound: false,
                                        delay: 1500
                                    });
                                }
                            }, error: function (data) {
                                Lobibox.notify('error', {
                                    msg: "出错啦:{status:" + data.status + "}",
                                    sound: false,
                                    delay: 1500
                                });
                            }
                        });
                    }
                }
            });

            function showBannerTemplate() {
                // 设置保存按钮不可用
                $("#save").removeAttr("disabled");
                $("#bannertemplateformid").get(0).reset();
                $("#aim").text('');
                $("#uploadId").removeAttr("disabled");
                $('#starModal').modal();
            }

            var file = $('#file'), aim = $('#aim');
            file.on('change', function (e) {
                var name = e.currentTarget.files[0].name;
                aim.text(name);
            });

            // 上传
            function upload() {
                var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
                var formFile = new FormData();
                formFile.append("action", "UploadVMKImagePath");
                formFile.append("file", fileObj); //加入文件对象
                formFile.append("appName", "wechat");
                formFile.append("token", $("#token").val());
                var input = document.getElementById("file");
                if (input.files) {
                    var f = input.files[0];
                    $.ajax({
                        url: $("#fileUploadUrl").val(),
                        type: "POST",
                        data: formFile,
                        dataType: "json",
                        cache: false,//上传文件无需缓存
                        processData: false,//用于对data参数进行序列化处理 这里必须false
                        contentType: false, //必须
                        beforeSend: function () {
                        },
                        success: function (data, status) {
                            if (data.code == 200) {
                                $("#uploadId").attr("disabled", "disabled");
                                $("#tipid").css("display", "none");
                                $("#urlId").val(data.value.fileUrl);
                                Lobibox.notify('success', {
                                    msg: "上传成功",
                                    sound: false,
                                    delay: 1500
                                });
                            } else {
                                Lobibox.notify('error', {
                                    msg: "上传失败",
                                    sound: false,
                                    delay: 1500
                                });
                            }
                        }, error: function (data) {
                        }
                    });
                }
            }
        </script>
    </section>
</div>
</body>
</html>